<template>
  <div>
    <el-row>
      <el-col :span="3">&nbsp;</el-col>
      <el-col :span="6">
        地区：
        <el-select v-model="queryParams.county" @change="changeCountyEvent" clearable placeholder="请选择地区">
          <el-option
            v-for="item in countyOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="6">
        市场：
        <el-select v-model="queryParams.marketId" @clear="marketClearEvent" clearable placeholder="请选择市场">
          <el-option
            v-for="item in marketOptions"
            :key="item.agrMarket.marketId"
            :label="item.agrMarket.marketName"
            :value="item.agrMarket.marketId">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="5">
        <el-row>
          <el-col :span="8">
            <el-button type="primary" @click="search">&nbsp;查 找&nbsp;</el-button>
          </el-col>
          <el-col :span="8">
            <el-button plain @click="reset">&nbsp;重 置&nbsp;</el-button>
          </el-col>
        </el-row>
      </el-col>
      
    </el-row>

    <div class="market_info">
      <ul class="infinite-list">
        <li v-for="(item, index) in marketList" :key="index" class="infinite-list-item  info_list_item">
          <div class="market_img">
            <img :src="item.agrFile == null ? (baseUrl + noRelevantPictures) 
            : (baseUrl + item.agrFile.filePath)" alt="暂无图片" style="width: 100%; height: 100%;">
          </div>
          <div class="market_detail">
            <span style="font-size: 18px; font-weight: bold;">
              <i class="el-icon-s-goods"></i>
              {{ item.agrMarket.marketName }}
            </span>
            <br/><br/>
            <span>
              <i class="el-icon-location"></i>
              {{ item.agrMarket.county }} &nbsp; {{ item.agrMarket.detailAddress }}
            </span>
            <br/>
          </div>
        </li>
      </ul>
    </div>

    <div class="baidu_map">
      <baidu-map
        class="map_view"
        :center="center"
        :zoom="zoom"
        :scroll-wheel-zoom="true"
        @ready="handler"
      > 
        <div v-for="(item, index) in allMarketList" :key="index">
            <!-- 添加标记 -->
            <bm-marker
              :position="{ lng: item.agrMarket.longitude, lat: item.agrMarket.latitude }"
              :dragging="false"
              :title="item.agrMarket.marketName"
            >
              <!-- 为标注添加文本标注 -->
              <bm-label
                :content="item.agrMarket.marketName"
                :labelStyle="{ color: 'green', fontSize: '10px' }"
                :offset="{ width: -25, height: 30 }"
              />
            </bm-marker>
        </div>

        <bm-info-window
          :position="this.windowPosition"
          :show="show"
          @close="infoWindowClose"
          @open="infoWindowOpen"
        >
        </bm-info-window>

        <!-- 行政区划 -->
        <bm-boundary
          name="滁州市"
          :strokeWeight="2"
          strokeColor="blue"
          fillColor="rgb(148, 234, 252)"
        ></bm-boundary>
      </baidu-map>
    </div>
  </div>
</template>

<script>
import { getPlaceList, getMarketByCounty } from "@/api/price"
import { listMarket } from "@/api/market"
export default {
  name: 'market',
  // components: {map},
  data() {
    return {
      countyOptions:[],
      marketOptions: [],
      marketList: [],
      allMarketList: [],
      queryParams: {
        pageNum: 1,
        pageSize: 1000,
        county: null,
        marketId: null,
      },
      baseUrl: 'http://47.92.118.35:9000/',
      noRelevantPictures: 'imges/noRelevantPictures.jpg',

      center: { lng: 0, lat: 0 },
      zoom: 10,
      windowPosition: {}, 
      // 批发市场信息框是否显示
      show: false,
    };
  },

  created() {
    this.getPlace()
    this.getMarket()
    this.getMarketList()
    this.getAllMarketList()
  },
  mounted() {

  },

  methods: {
    getMarketList() {
      listMarket(this.queryParams).then(res => {
        this.marketList = res.rows
      }) 
    },
    getAllMarketList() {
      listMarket({
        pageNum: 1,
        pageSize: 1000,
      }).then(res => {
        this.allMarketList = res.rows
      }) 
    },
    getPlace() {
      getPlaceList().then(res => {
        res.data.forEach((item, index) => {
          this.countyOptions.push({
            value: item,
            label: item,
          })
        })
      })
    },
    getMarket() {
      getMarketByCounty({
        county: this.queryParams.county
      }).then(res => {
        this.marketOptions = res.data
      })
    },
    // 查询每个地区的市场
    changeCountyEvent(item) {
      this.getMarket()
      this.queryParams.marketId = null
    },
    marketClearEvent() {
      this.getMarketList()
    },
    search() {
      this.getMarketList()
    },
    reset() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 1000,
        county: null,
        marketId: null,
      }
      this.getMarketList()
    },
    handler() {
      // 默认地图中心
      (this.center.lng = 118.613946),
      (this.center.lat = 32.45424),
      (this.zoom = 10);
    },
    infoWindowClose(e) {
      this.show = false;
    },
    infoWindowOpen(e) {
      this.show = true;
    },
  },
};
</script>

<style lang="scss" scoped>
.market_info {
  max-width: 100%;
  max-height: 500px;
  margin: 20px 20px;
  overflow: scroll;
  border: 3px solid green;
  border-radius: 10px;
  // background-color: rgb(148, 234, 252);
}
.infinite-list {
  list-style-type:none;
  padding: 0 20px;
}
.info_list_item {
  width: 100%;
  height: 140px;
  margin: 10px 0;
  padding: 5px;
  border: 2px solid green;
  border-radius: 10px;
}

.market_img {
  float: left;
  width: 13%;
  height: 140px;
}

.market_detail {
  float: left;
  width: 80%;
  height: 100%;
  margin-left: 2%;
}
.baidu_map {
  max-width: 100%;
  height: 600px;
  margin: 40px 20px;
  border: 3px solid green;
  border-radius: 10px;
}
.map_view {
  width: 100%;
  height: 100%;
}

// 去除百度地图水印
::v-deep .anchorBL{
 display: none ;
}

</style>